<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <!-- 按钮区 -->
    <el-col :span="24">
      <div class="button-wrapper">
        <el-button size="mini" type="primary" round @click="dialogFormVisible=true">增加</el-button>
        <el-button size="mini" type="danger" round  @click="batchEdit(-1)">删除</el-button>
      </div>
    </el-col>
    
    <!-- 查询条件 -->
    <div class="search-wrapper">
        <ul class="search-box" :model="conditionList">
        <li><span class="filter-name">河道公示牌名称：</span>
          <el-select v-model="listQuery.bulletinName" placeholder="请选择" clearable style="width:130px" class="filter-item">
            <el-option v-for="item in bulletinNameOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select></li>
        <li><span class="filter-name">公示牌编号:</span>
          <el-select v-model="listQuery.bulletinCode" placeholder="请选择" clearable style="width:150px" class="filter-item">
            <el-option v-for="item in bulletinCodeOptions" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select></li>
        <!-- <li><span class="filter-name">位置：</span>
          <el-select v-model="listQuery.riverFlow" placeholder="请选择" clearable style="width:150px" class="filter-item">
            <el-option v-for="item in bulletinIdOptions3" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select></li> -->
        <li style="padding-left:10px;"><el-button style="vertical-align:middle;margin-top:-2px;" round size="mini" type="primary" @click="handSearch()">查询</el-button></li>
        </ul>
    </div>
    <!-- 表格 -->
    <div class="data-wrapper">
      <template v-if="tableData!=null">
        <el-table ref="multipleTable" :data="tableData"  tooltip-effect="dark" style="width: 100%"
           @selection-change="handleSelectionChange">
          <el-table-column type="selection" label="全选" width="55">
          </el-table-column>
          <el-table-column type="index" label="序号" width="110" :index="indexMethod">
          </el-table-column>
          <el-table-column prop="bulletinName" label="公示牌名称"  width="110">
          </el-table-column>
          <el-table-column prop="bulletinCode" label="公示牌编号"  width="110">
          </el-table-column>
          <el-table-column prop="regId" label="所属区域"  width="110">
          </el-table-column>
          <el-table-column prop="riverFlow" label="位置"  width="110">
          </el-table-column>
          <el-table-column prop="bulletinAddress" label="详细信息"  width="110">
          </el-table-column>
          <el-table-column prop="createTime" label="公示牌信息"  width="110">
          </el-table-column>

          <el-table-column fixed="right" label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button title="查看" size="small" icon="el-icon-search" type="primary" circle @click="handleView(scope.$index, scope.row)"></el-button>
              <el-button title="编辑" size="small" icon="el-icon-edit" type="success" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
              <el-button title="删除" size="small" icon="el-icon-delete" type="danger" circle @click="handleDel(scope.$index, scope.row)"></el-button>
            </template>
           </el-table-column>
        </el-table>
      </template>
    </div>
    
    <!-- 底部按钮和分页 -->
    <el-row :gutter="20" v-if="dataCount" type="flex" justify="space-between" align="center" class="page-wrapper">
      <el-col :span="20">
        <div class="page-item">
          <el-pagination background  
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.currentPage" 
          :page-sizes="pageSizes" 
          :page-size="listQuery.pageSize" 
          layout="total, sizes, prev, pager, next, jumper" 
          :total="dataCount"/>
        </div>
      </el-col>
    </el-row>
    <!-- 弹出窗口区域 -->
    <el-dialog title="公示牌信息添加" :visible.sync="dialogFormVisible">
       <el-form :model="form" ref="form" :rules="rules">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="公示牌名称" :label-width="formLabelWidth" prop="bulletinName">
              <el-input v-model="form.bulletinName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公示牌编号" :label-width="formLabelWidth" prop="bulletinCode">
              <el-input v-model="form.bulletinCode" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="所属区域" :label-width="formLabelWidth" prop="regId">
              <el-select v-model="form.regId" placeholder="请选择地市">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>      
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="位置" :label-width="formLabelWidth" prop="riverFlow">
              <el-input v-model="form.riverFlow" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细信息" :label-width="formLabelWidth" prop="bulletinAddress">
              <el-input v-model="form.bulletinAddress" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
           <el-col :span="12">
            <el-form-item label="公示牌信息" :label-width="formLabelWidth">
               <el-input type="textarea" v-model="form.bulletinNote" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="insert('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹出窗口区域 -->
<el-dialog title="公示牌信息修改" :visible.sync="editdialogForm">
      <el-form  :model="oneCol" v-if="oneCol" :rules="editRules" ref="oneCol">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="公示牌名称" :label-width="formLabelWidth">
              <el-input v-model="oneCol.bulletinName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="公示牌编号" :label-width="formLabelWidth">
              <el-input v-model="oneCol.bulletinCode" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="所属区域" :label-width="formLabelWidth">
              <el-select v-model="oneCol.regId" placeholder="请选择地市">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="位置" :label-width="formLabelWidth">
              <el-input v-model="oneCol.riverFlow" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="详细信息" :label-width="formLabelWidth">
              <el-input v-model="oneCol.bulletinAddress" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="公示牌信息" :label-width="formLabelWidth">
              <el-input v-model="oneCol.bulletinNote" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="editdialogForm = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="update('oneCol')">确 定</el-button>
      </div>
    </el-dialog>
    <!--查看  -->
    <el-dialog title="查看" :visible.sync="showDialog">
      <el-form v-if="oneCol">
        <el-row :gutter="10">
          <el-col :span="12">
           公示牌名称： {{oneCol.bulletinName}}
          </el-col>
          <el-col :span="12">
           公示牌编号： {{oneCol.bulletinCode}} 
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            所属区域：{{oneCol.regId}}
          </el-col>
          <el-col :span="12">
            位置：{{oneCol.riverFlow}}  
          </el-col>
          <el-col :span="12">
            详细信息：{{oneCol.bulletinAddress}}  
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="showDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
  
</template>
<script>
    import axios from 'axios';
    export default {
        data() {
            return {
                bulletinNameOptions:[{
                  value:'长江',
                  label:'长江'
                }],
                bulletinCodeOptions:[{
                  value:'2',
                  label:'2'
                }],
                bulletinNoteOptions3:[{
                  value:'2',
                  label:'2'
                }],
                tableData:[],
                //默认数据总数
                dataCount:100,
                pageSizes:[5, 10, 20, 30, 40],
                //查询条件
                listQuery: {
                  currentPage:1,
                  pageSize:5
                },
                listSelect: [],
                dialogFormVisible:false,
                showDialog:false,
                editdialogForm:false,
                loading:false,
                form: {},
                oneCol:{},
                formLabelWidth: '100px',
                conditionList:'',
                dialogFormVisible: false,
                isView: true,
                selectIndex:-1,
                selectList:{},
                editRules: {
                  bulletinName: [
                    { required: true, message: '请输入公示牌名称', trigger: 'blur' },
                  ],
                  bulletinCode: [
                    { required: true, message: '请输入公示牌编号', trigger: 'change' }
                  ],
                  riverId: [
                    { required: true, message: '请输入详细信息', trigger: 'change' }
                  ]
                },
                 rules: {
                  bulletinName: [
                    { required: true, message: '请输入公示牌名称', trigger: 'blur' },
                  ],
                  bulletinCode: [
                    { required: true, message: '请输入公示牌编号', trigger: 'blur' }
                  ],
                  regId: [
                    { required: true, message: '请选择区域', trigger: 'blur' }
                  ],
                  riverFlow: [
                    { required: true, message: '输入位置', trigger: 'blur' }
                  ],
                  riverId: [
                    { required: true, message: '请输入详细信息', trigger: 'blur' }
                  ]
                },
            }
            
        },
                  
        
        // created() {
           
        // },
        mounted(){
             //list赋值
            this.getList();
        },
          methods: {
                  // 状态翻译
                  formatState: function(row, column) {
                    return row.userState == 0 ? "启用" : "停用";
                  },
                 //查看
                  getList() {
                  this.loading=true;
                  this.getRequest('/api/rcs/bulletins',this.listQuery).then((res)=>{
                    var data = res.data;
                    if(data.status==200){
                      this.tableData=data.data;
                      this.dataCount=data.count;
                    }else{
                      alert(data.msg);
                    }
                    this.loading = false
                })
                .catch((error)=>{
                    //错误信息
                  alert(error)
                  })
                },
                  //搜索功能
                  handSearch(val){
                    this.getList()
                  },
                  indexMethod(index) {
                     return (
                        index + 1 + (this.listQuery.currentPage - 1) * this.listQuery.pageSize
                    );
                  },
                  //每页个数改变
                  handleSizeChange(size) {
                      this.listQuery.pageSize=size;
                      this.listQuery.currentPage=1;
                      this.getList()
                  },
                  //当前页改变
                  handleCurrentChange(currentPage) {
                      this.listQuery.page=currentPage;
                      this.getList()
                  },
                  //选中调用
                  handleSelectionChange(val) {
                    this.listSelect = val;
                  },
                  //新增
                insert(form) {
                  this.$refs[form].validate(valid => {
                    if (valid) {
                        this.postRequest('/api/rcs/bulletin', this.form).then((res) => {
                            var data = res.data;
                            if (data.status == 200) {
                                this.$message.success(data.msg);
                                this.getList();//list赋值
                                this.form={}
                            } else {
                                this.$message.error(data.msg);
                            }
                        }).catch((error) => { //错误信息
                            console.log(error)
                        });
                    }else{
                      this.$message.error("error submit!!");
                      return false;
                    }
                  })
                    
                this.dialogFormVisible = false;
            },
                  //显示编辑弹窗
                  handleEdit(index, row){
                        this.editdialogForm=true;
                        this.oneCol=row;
                  },
                  //查看操作
              handleView(index, row){
                  this.showDialog = true;
                  this.oneCol=row;
              },
              //更新
           //更新
    update(oneCol) {
      this.$refs[oneCol].validate(valid => {
        if (valid) {
          this.putRequest("/api/rcs/bulletin", this.oneCol)
            .then(res => {
              var data = res.data;
              if (data.status == 200) {
                this.$message.success(data.msg);
                this.editdialogForm = false;
                this.getList();
                this.oneCol = {};
              } else {
                this.$message.error(data.msg);
              }
            })
            .catch(error => {
              //错误信息
              this.$message.error(error);
            });
        } else {
          this.$message.error("error submit!!");
          return false;
        }
      });
    },
          //批量编辑
          batchEdit(val) {
           if (this.listSelect.length <= 0) {
            this.$message.warning("请选择一条数据");
            return;
          }

          var strArr = [];
          for (var i = 0; i < this.listSelect.length; i++) {
            strArr.push(this.listSelect[i].bulletinId);
          }

          //前面三个参数分别是 表名，状态字段名，id字段名
          //status 为状态值 （0：正常  9：停用 -1：删除）
          //ids 为需要批量操作的 id数组
          var submitData = {
            tableName: "b_bulletin",
            tableCol: "bulletin_state",
            tableId: "bulletin_id",
            status: val,
            ids: strArr
          };
          this.$confirm("确认批量操作？")
            .then(_ => {
              this.putRequest("/api/common/batch", submitData)
                .then(res => {
                  var data = res.data;
                  if (data.status == 200) {
                    this.$message.success(data.msg);
                    this.getList();
                  } else {
                    this.$message.error(data.msg);
                  }
                })
                .catch(error => {
                  //错误信息
                  this.$message.error(error);
                });
            })
            .catch(() => {
              this.$message.info("已取消操作");
            });
        },
        //单个删除操作
        handleDel(index, row){
          var strArr=[];
        strArr.push(row.bulletinId);
          //前面三个参数分别是 表名，状态字段名，id字段名
          //status 为状态值 （0：正常  9：停用 -1：删除）
          //ids 为需要批量操作的 id数组
          var submitData={
            tableName:'b_bulletin',
            tableCol:'bulletin_state',
            tableId:'bulletin_id',
            status:'-1',
            ids:strArr
          };
          this.$confirm("确认操作？")
        .then(_ => {
          this.putRequest("/api/common/batch", submitData)
            .then(res => {
              var data = res.data;
              if (data.status == 200) {
                this.$message.success(data.msg);
                this.getList();
              } else {
                this.$message.error(data.msg);
              }
            })
            .catch(error => {
              //错误信息
              this.$message.error(error);
            });
        })
        .catch(() => {
          this.$message.info("已取消操作");
        });
        }
      }
    }
</script>

